<template>
  <div class="ck-saaa-box">

    <!-- 顶部的地区 学生个数 之类的-->
    <div class="top-title-name">
      <div class="flex-box">
        <div class="item-left">
           全部<i class="iconfont icon-daosanjiao"></i>
        </div>

        <div class="item-conter">
           <span class="name">学校:</span>
           <span class="num">125</span>
           <span class="unit pad">所</span>

           <span class="name">学生:</span>
           <span class="num">1669</span>
           <span class="unit">名</span>

        </div>

        <div class="item-right" @click="ccc">
           <i class="iconfont icon-fangdajing"></i>搜索
        </div>
      </div>
    </div>
<!-- 顶部的地区 学生个数 之类的end-->

    <!-- 碳水化合物 脂肪 蛋白质 饼图 模块-->
    <div class="cart-pir-box">

      <!-- 日期选择开始 -->
      <div class="cart-time">
        <div class="flex-left">
          <span class="time-num">
            2020年5月
          </span>
          <span class="xian"></span>
          <span class="time-num">
             2020年5月
          </span>
        </div>

        <div class="flex-right">
          <i class="iconfont icon-NMStubiao-"></i>
          <span class="span">列表</span>
        </div>
      </div>
       <!-- 日期选择结束 -->

       <!-- 左边白色背景-->
      <div class="left-bg reverse-bg">

      </div>
      <!-- 右边白色背景-->
      <div class="reverse-bg right-bg">

      </div>

      <!-- 饼图内容区域-->
      <div class="content-bg">

        <div class="content-title">
          <div class="name">热量</div>
          <div class="num">
            <span class="span-num">1560000/<span class="span">1560000</span><span class="span-unit">千卡</span>
            </span>
          </div>
        </div>
        <div class="pir-flex">
          <div class="pir-item" v-for="(item,index) in cardPirData" :key="index">
            <ck_nutrition_pir :color="cardColor[index]" :item="item" ></ck_nutrition_pir>
           </div>
        </div>
      </div>


    </div>
  <!-- 碳水化合物 脂肪 蛋白质 饼图 模块end-->

   <!-- 营养建议模块 -->
    <div class="nutrition-proposal-box">
       <div class="proposal-title">营养建议</div>
       <div class="proposal-text">
         热量摄入适中，请继续保持；
       </div>
       <div class="proposal-text">
         碳水化合物偏高，建议适量调低。
       </div>
       <div class="proposal-text">
         蛋白质摄入偏低，建议提高摄入量，多吃肉类食品；
       </div>
       <div class="proposal-text">
         脂肪摄入量偏高，建议少吃蛋类、肥肉类食品，多吃蔬菜和新鲜水果。
       </div>
    </div>

    <!-- 营养建议模块end -->
    <div class="ranking-mall-box">
      <ck_ranking_title :sort="rankingSortData"  :title="'各城区热量统计排行'"
      :current="1"
      ></ck_ranking_title>
        <div style="padding-top: 14px; width: 100%;">
          <div class="ranking-mall-item" v-for="(item,index) in rankList" :key="index">
            <ck_ranking_progress :item="item" :ranking="index"></ck_ranking_progress>
          </div>
        </div>

    </div>

  </div>
</template>

<script>
  import ck_nutrition_pir from "./ck_nutrition_pir.vue"
  import ck_ranking_title from "./ck_ranking_title.vue"
  import ck_ranking_progress from "./ck_ranking_progress.vue"
  export default{
    name:"index",
    data(){
      return {
        nuritent_id:1,//营养元素排行id
        cardPirData:[{name:"",value:0},{name:"",value:0},{name:"",value:0}],
        cardColor:[["#5bedd6","#f1f1f1"],['#868dff', '#f1f1f1'],['#fbba46', '#f1f1f1']],
        rankingSortData:[{id:1,name:"热量"},{id:10,name:"碳水"},{id:4,name:"蛋白质"},{id:7,name:"脂肪"}],
        rankList:[{id:1,name:"青秀区(10所)",percentage:"75%",value:"17550千卡"},
        {id:1,name:"西乡塘(20所)",percentage:"65%",value:"15550千卡"},
        {id:1,name:"兴宁区(8所)",percentage:"63%",value:"15000千卡"},
        {id:1,name:"五象新区(11所)",percentage:"52%",value:"14350千卡"},
        {id:1,name:"江南区(22所)",percentage:"40%",value:"9550千卡"},
        {id:1,name:"邕宁区(5所)",percentage:"36%",value:"8550千卡"},
        ]
      }
    },
    methods:{
      ccc(){
        this.$router.push("./schoolList")
      }
    },
    components:{
      ck_nutrition_pir,ck_ranking_title,ck_ranking_progress
    },
    activated() {
      console.log("aaa")
      this.cardPirData=[{name:"碳水",value:36},{name:"蛋白质",value:42},{name:"脂肪",value:22}]
      this.$nextTick(()=>{

      })
    },
    
  }
</script>

<style  lang="stylus">
  html,body{
    background:#e5e5e5;
  }

  .ck-saaa-box{


    /* 顶部 碳水 脂肪 热量 蛋白质 模块*/
    .cart-pir-box{
      width:100%;
      height:240px;
      background:#835eea;
      position:relative;
      .cart-time{
        width:100%;
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding-top:10px;
        .flex-left{
          flex-grow:1;
          box-sizing:border-box;
          padding-left:38px;
          line-height:1;
          font-size:12px;
          color:#FFFFFF;
          .time-num{
            padding:10px 18px;
            background:#6d49cf;
            display:inline-block;
            border-radius:2px 2px;
          }
          .xian{
            display:inline-block;
            width:8px;
            height:2px;
            background:#704cd4;
            color:#704cd4;
            margin:0 8px;
            vertical-align: middle;
          }
        }
        .flex-right{
          padding-right:14px;
          font-size:14px;
          font-weight:bold;
          color:#FFFFFF;
          .iconfont{
            font-size:14px;
            font-weight:normal;
          }
        }


      }

      .reverse-bg{
        width:30px;
        height:220px;
        background:#FFFFFF;
        box-shadow:0 0 6px rgba(0,0,0,0.3);
      }
      .left-bg{
        position:absolute;
        left:0;
        top:52px;
        border-radius:0 4px 4px 0;
      }
      .right-bg{
        position:absolute;
        top:52px;
        right:0;
        border-radius:4px 0 0 4px;
      }

      .content-bg{
        position:absolute;
        left:38px;
        top:52px;
        border-radius:4px 4px;
        box-shadow:0 0 6px rgba(0,0,0,0.3);
        width:calc(100% - 74px);
        height:220px;
        background:#FFFFFF;
        overflow:hidden;
        .pir-flex{
          width:100%;
          display:flex;
          justify-content:flex-start;
          align-items:center;
          .pir-item{
            flex-grow:1;
            min-width:33.3%;
            max-width:33.3%;
          }
        }
      }
      .content-title{
        width:100%;
        box-sizing:border-box;
        padding:16px 14px 20px 16px;
        line-height:1.3;
        .name{
          font-size:14px;
          font-weight:bold;
          color:#000000;
          padding-bottom:10px;
        }
        .num{
          font-size:14px;
          color:#000000;
          padding-bottom:20px;
          border-bottom:1px dashed #dcdcdc;
          .span-num{
            color:#808080;
            .span-unit{
              font-size:10px;
              color:#000000;
            }
            .span{
              color:#000000;
            }
          }

        }
        .num::after{
          width:0;
          height:0;
          content:"";
        }
      }
    }
    /* 顶部 碳水 脂肪 热量 蛋白质 模块end*/

    /* 顶部 学生人数  地区选择  搜索 模块*/
    .top-title-name{
      width:100%;
      background:#FFFFFF;
      box-sizing:border-box;
      padding:14px 14px 14px 8px;
      line-height:1.3;

      .flex-box{
        display:flex;
        justify-content:space-between;
        align-items:center;
        .item-left{
          font-size:12px;
          color:#000000;
          font-weight:bold;
          .iconfont{
            font-size:10px;
            font-weight:normal;
          }
        }

        .item-conter{
          font-size:12px;
          .name{
            color:#000000;
          }
          .num{
            color:#ff0103;
          }
          .unit{
            color:#000000;
          }
          .pad{
            padding-right:10px;
          }
        }

        .item-right{
          font-size:12px;
          color:#000000;
          .iconfont{
            font-size:12px;
            font-weight:600;
          }
        }

      }
    }

    /* 顶部 学生人数  地区选择  搜索 模块 end*/

    /* 营养建议模块   */
    .nutrition-proposal-box{
      width:100%;
      margin-top:7px;
      padding:10px 14px 16px 14px;
      line-height:1.3;
      background:#FFFFFF;
      box-sizing:border-box;
      .proposal-title{
        color:#000000;
        font-size:14px;
        padding-bottom:6px;
      }
      .proposal-text{
        color:#808080;
        font-size:12px;
        padding-bottom:6px;
      }
    }
    /* 营养建议模块end */


    /* 排行榜的box*/
    .ranking-mall-box{
      width:100%;
      background:#FFFFFF;
      margin-top:7px;
      padding:14px 14px;
      box-sizing:border-box;
      overflow-x:scroll;
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */

      /* 进度条外部样式控制 */
      .ranking-mall-item{
        width:100%;
        padding:14px 0;
        border-bottom:1px solid #f6f6f6;
      }
      .ranking-mall-item:nth-last-of-type(1){
        border-bottom:none;
      }
      /* 进度条外部样式控制end */
    }
    .ranking-mall-box::-webkit-scrollbar {
    		  display: none; /* Chrome Safari */
    }

  }



</style>
